<!--执行详情-多币对-->
<template>
  <div @rightBtn="rightBtn">
    <scroller class="scroller">

      <div class="wrapper bg1" v-if="data">
        
        <!--其他-基础信息-->
        <div class="column">

          <div class="row acenter">
            <text class="font32 text1">{{data.projectName}}</text>
            <div class="all"></div>
            <text :class="['font28', (data.states == 'EXECUTE' ?  'main-t1' : 'text3')]">{{getRunState(data.endType)}}</text>
          </div>

          <div class="height20"></div>
          <div class="row acenter">
            <text class="font24 text3 all">{{amRun.getParseTime(data.startTime)+'-'+amRun.getParseTime(data.endTime) + '（' + getExecuteTime(data.startTime, data.endTime) + '）'}}</text>

            <div class="row acenter" @click="wagesClick">
              <text class="font28 text3">{{T("佣金")}}</text>
              <LImage class="explain" :src="Config.img('wenhao.png')"></LImage>
            </div>
          </div>
        </div>

        
        <!--收益信息-->
        <div class="line bg3"></div>
        <div class="row all">
          <div class="column all">
            <text class="font24 text3">{{T('总投入')+'('+data.investCoin+')'}}</text>
            <text class="font24 text1">{{data.investCoinNum}}</text>
          </div>
          <div class="column all">
            <text class="font24 text3">{{T('总收益')+'('+data.investCoin+')'}}</text>
            <div class="row aend">
              <text :class="['font24', Config.upDownFont(data.realEarnings)]">{{math.addJia(data.realEarnings)}}</text>
              <text :class="['font20', Config.upDownFont(data.realEarnings)]">{{'('+math.addJia(data.realEarningRate)+'%)'}}</text>
            </div>
          </div>
          <div class="column all aend">
            <text class="font24 text3">{{T('总年化')}}</text>
            <text :class="['font24', Config.upDownFont(data.realYearIncome)]">{{math.addJia(data.realYearIncome)+'%'}}</text>          </div>
        </div>
        
        <!--收益走势图-->
        <div class="line bg3"></div>
        <div class="row acenter">
          <text class="font28 text1 all">{{T('收益分析')}}</text>
          <div class="chart-line main1"></div>
          <text class="font24 text2">{{T("总收益率")}}</text>
        </div>
        <WeexLineChart class="line-chart" :data="data.realIncomeList"></WeexLineChart>

        <!--持仓-->
        <!-- <div class="line bg3"></div>
        <text class="font28 text1">{{T('持仓')}}</text>

        <div class="height30"></div>
        <div class="cell">
          <text class="font20 text3 all">{{T('币种')}}</text>
          <text class="font20 text3 all">{{T('数量')}}</text>
          <text class="font20 text3 text-right all">{{T('浮动盈亏')+'('+data.investCoin+')'}}</text>
        </div>
        
        <div class="cell" v-for="(item, index) in data.coinHold" v-bind:key="index"> 
          <text class="font20 text2 all">{{item.coin}}</text>
          <text class="font20 text2 all">{{item.coinNum}}</text>
          <text class="font20 text2 text-right all" v-if="item.coin == data.investCoin">{{'-'}}</text>
          <text :class="['font20', 'text-right',  'all', Config.upDownFont(item.folatEarnings)]" v-else>{{math.addJia(item.folatEarnings)}}</text>
        </div> -->
      </div>
    </scroller>
  </div>
</template>

<script>
import navigator from "@/_js/navigator";
import Config from "@/_js/config";
import modal from "@/_js/modal";
import math from "@/_js/math";
import amRun from "@/run/amRun";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("执行详情"));

//执行详情
export default {
  
  data() {
    return {
      T: T,
      math: math,
      Config: Config,
      amRun:amRun,
      isOk:false,

      executeId: "", //执行ID
      data:undefined, //执行详情
    };
  },

  mounted() {

    Config.init(() => {
      setTimeout(() => {
        this.executeId = navigator.getParam("executeId");
        this.httpFundDetail();
      }, 500);
    }, [Config.OPT_UP_DOWN]);
  },

  methods: {

    initData(data) {

      //投入数量
      var length = math.getCoin(data.investCoin);
      data.investCoinNum = math.xiaoshu(data.investCoinNum, length, 2);
      
      //收益
      if (data.realIncomeList.length == 0) {
        data.realIncomeList = [{'t':data.startTime, 'e':'0'}, {'t':data.endTime, 'e':'0'}];
      } else if (data.realIncomeList.length == 1) {
        var real = data.realIncomeList[0];
        data.realIncomeList.push({'t':data.endTime, 'e':real.e});
      }

      ///持仓
      if (data.coinHold) {

        var coinHold = [];
        var dict = data.coinHold;
        for (const key in dict) {
          var map = dict[key];
          map.coin = key;
          key == data.investCoin ? coinHold.unshift(map) : coinHold.push(map);
        }
        data.coinHold = coinHold;
      } else {
        data.coinHold = [{'coin':data.investCoin,
                          'coinNum':data.investCoinNum,
                          'folatEarnings':'--'}];
      }

      return data;
    },

    /********************************** HTTP*/
    //http托管详情
    httpFundDetail() {
      
      modal.showLoad();
      var param = {'executeId': this.executeId};
      weexHttp.post("foundation/queryFundExecuteHistoryDetail", param, true, (data) => {

          modal.hideLoad();
          if (data.status == 200) {
            var data = data.data;
            this.data = this.initData(data);
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },

    /********************************** GET*/
    //获取运行状态
    getRunState(states) {
      var state = amRun.getRunState(true, false, states);
      return T(state);
    },

    //获取运行时间长
    getExecuteTime(startTime, endTime){
      var time = amRun.getRunTime(startTime, endTime, T('天'), T('时'), T('分'));
      return time;
    },
    
    //获取结束时间
    getEndTime(startTime, effectTime) {

      var delayed = math.cheng(effectTime, '86400000', 0, 2);

      startTime = startTime + Number(delayed);

      var time = new Date(Number(startTime));
      var year = time.getFullYear();

      var month = time.getMonth() + 1;
      month = month < 10 ? "0"+month : month;

      var day = time.getDate();
      day = day < 10 ? "0"+day : day;

      var hour = time.getHours();
      hour = hour < 10 ? "0"+hour : hour;

      var minute = time.getMinutes();
      minute = minute < 10 ? "0"+minute : minute;

      return year+"/"+month+"/"+day + ' ' + hour +":"+ minute;
    },
    
    /********************************** 点击事件*/
    //佣金
    wagesClick(){

      var advanceSetting = this.data.advanceSetting;
      var param = {'profitLayer':advanceSetting.profitLayer,
                  'riskIndemnityComment':advanceSetting.riskIndemnityComment,
                  'startTime':this.data.startTime};
      navigator.openDialog('TrustExplain', param);
    },
  },

};
</script>

 
<style src="@/_css/style.css"></style>
<style scoped>
.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.wrapper {
  width: 750px;
  padding: 44px;
}
.line {
  height: 1px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.text-right {
  text-align: right;
}
.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}

/*走势图*/
.line-chart {
  height: 450px;
  margin-top: 40px;
}
.chart-line{
  width: 20px;
  height: 12px;
  border-radius: 2px;

  margin-right: 20px;
}

/********************** 持仓*/
.cell {
  flex-direction: row;
  align-items: center;
  height: 40px;

  margin-bottom: 20px;
}

/********************** 宽高*/
.height20 {
  height: 20px;
}
.height30{
  height: 30px;
}
.height40{
  height: 50px;
}
</style>
